<html xmlns:th="http://www.thymeleaf.org" >
  <head >
      <script src="/plugins/modernizr/js/modernizr.js"></script>
      <script src="/js/jquery.mmenu.min.js"></script>
      <!-- Vendor CSS-->
      <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
      <link href="/vendor/skycons/css/skycons.css" rel="stylesheet" />
      <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

      <!-- Plugins CSS-->
      <link href="/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
      <link href="/plugins/scrollbar/css/mCustomScrollbar.css" rel="stylesheet" />
      <link href="/plugins/fullcalendar/css/fullcalendar.css" rel="stylesheet" />
      <link href="/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet" />
      <link href="/plugins/xcharts/css/xcharts.min.css" rel="stylesheet" />
      <link href="/plugins/morris/css/morris.css" rel="stylesheet" />

      <!-- Theme CSS -->
      <link href="/css/jquery.mmenu.css" rel="stylesheet" />

      <!-- Page CSS -->
      <link href="/css/style.css" rel="stylesheet" />
      <link href="/css/add-ons.min.css" rel="stylesheet" />

  </head>
  <body>
  <div id ="collect-cont" th:fragment="collectBox" >
      <div  class="col-sm-12"  th:each="collect:${collectList}">

          <div class="panel panel-accordion">
              <div class="panel-heading bk-bg-primary">
                  <h4 class="panel-title">
                      <a class="accordion-toggle" data-toggle="collapse" style="text-decoration:none;" data-parent="#accordionInfo" href="#collapseInfoOne"th:text="${collect.title}">
                          spring-boot - 纯洁的微笑博客
                      </a>
                  </h4></div>


              <div id="collapseInfo1" class="accordion-body clearfix"  >
                  <a  style="color:#5e5e5e;text-decoration:none;" th:href="${collect.url}">
                      <img  th:src="${collect.logoUrl}" alt="" height="100px;" width="100px;" style="float: left; margin: 10px 10px 10px 10px;">
                      <div class="panel-body"th:text="${collect.category}" style="overflow: hidden; width: 900px; height:100px;float: left; line-height: 20px;" >内容</div>
                  </a>
              </div>
              <div style="width: 100%; margin-bottom: 20px;">
											<span style="margin-left: 60%; ">
												<a th:id="'commentSize'+${collect.getId()}" th:onclick="'opeanview('+ ${collect.getId()}+')'" style="cursor: pointer; color:#5e5e5e;"><i  class="glyphicon glyphicon-comment" th:text="${collect.getCommentSize()}"></i> </a>
											</span>

                  <a th:onclick="'getUserPersional('+ ${collect.getUserId()}+')'" style="cursor: pointer; color: #5e5e5e"><i class="	glyphicon glyphicon-user" style="margin-left:30px " th:text="' '+${collect.getUserName()}"></i></a>
                  <i class="	glyphicon glyphicon-folder-close" style="margin-left:30px " th:text="' '+${collect.getFavoriteName()}"></i>
              </div>
              <ul  th:id="${collect.getId()}" style="width:1100px; margin:0 auto;  list-style: none; display: none;">

                  <li>
                      <p class="clearfix">
                          <input type="text" th:id="'viewContent'+${collect.getId()}" style="height: 30px; width: 1000px; " placeholder="请输入评论内容">
                          <button th:onclick="'CommentBtn('+${collect.getId()}+')'">提交</button>
                          <button style="cursor: pointer; float: right; margin:8px 12px 0 0;"  th:onclick="'closeview('+ ${collect.getId()}+')'">收起</button>
                      </p>
                  </li>
                  <li  th:id="'commentTable'+${collect.getId()}" >
                      <table style="margin-left: 20px;" th:each="commentList:${collect.getCommentList()}">
                          <tr>
                              <td style="color: #0a0a0a;" th:text="${commentList.getSendUserName()}+' : '"></td>
                              <td th:text="${commentList.getContent()}"></td>
                              <!--<td><button th:onclick="'delitedComment('+ ${commentList.getId()}+')'">删除</button></td>-->
                          </tr>
                      </table>

                  </li>

              </ul>

          </div>
      </div>
      <script>
          function opeanview(id) {
              $("#"+id).show();
          }
          function closeview(id) {
              $("#"+id).hide();
          }
          function toindex(){
              window.location.reload();
          }



          function CommentBtn(collectid) {
              $.ajax({
                  type:"POST",
                  dataType:"JSON",
                  contentType: "application/json;charset=UTF-8",
                  url:"/addComment",
                  data:JSON.stringify({
                      content:$("#viewContent"+collectid).val(),
                      sendUserId:localStorage.getItem("id"),
                      collectId:collectid
                  }),
                  beforeSend: function (XMLHttpRequest) {
                      XMLHttpRequest.setRequestHeader("token",localStorage.getItem("token"));
                  },
                  success:function (Response) {
                      if(Response.code == 0){
                          $("#commentTable"+collectid).html(" ");
                          $("#commentSize"+collectid).html('<i  class="glyphicon glyphicon-comment"></i>'+Object.keys(Response.msg).length);
                          Response.msg.forEach(function (item,index){
                              $("#commentTable"+collectid).html($("#commentTable"+collectid).html()+
                                  '<table style="margin-left: 20px;"><tr><td style="color: #0a0a0a;" >'+item.sendUserName+':</td><td >'+ item.content+'</td></tr></table>'
                              )

                          })
                      }else console.log(msg)
                  }

              })


          }
      </script>
  </div>




  <!-- Vendor JS-->
  <script src="/vendor/js/jquery.min.js"></script>
  <script src="/vendor/js/jquery-2.1.1.min.js"></script>
  <script src="/vendor/js/jquery-migrate-1.2.1.min.js"></script>
  <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="/vendor/skycons/js/skycons.js"></script>

  <!-- Plugins JS-->
  <script src="/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
  <script src="/plugins/scrollbar/js/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="/plugins/bootkit/js/bootkit.js"></script>
  <script src="/plugins/moment/js/moment.min.js"></script>
  <script src="/plugins/fullcalendar/js/fullcalendar.min.js"></script>
  <script src="/plugins/touchpunch/js/jquery.ui.touch-punch.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.pie.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.resize.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.stack.min.js"></script>
  <script src="/plugins/flot/js/jquery.flot.time.min.js"></script>
  <script src="/plugins/xcharts/js/xcharts.min.js"></script>
  <script src="/plugins/autosize/jquery.autosize.min.js"></script>
  <script src="/plugins/placeholder/js/jquery.placeholder.min.js"></script>
  <script src="/plugins/datatables/js/dataTables.bootstrap.min.js"></script>
  <script src="/plugins/datatables/js/jquery.dataTables.min.js"></script>
  <script src="/plugins/raphael/js/raphael.min.js"></script>
  <script src="/plugins/morris/js/morris.min.js"></script>
  <script src="/plugins/gauge/js/gauge.min.js"></script>
  <script src="/plugins/d3/js/d3.min.js"></script>


  <!--<script src="/plugins/raphael/js/raphael.min.js"></script>
  <script src="/plugins/fullcalendar/js/fullcalendar.min.js"></script>
  <script src="/plugins/moment/js/moment.min.js"></script>-->

  <!-- Theme JS -->

  <script src="/js/core.min.js"></script>

  <!-- Pages JS -->
  <script src="/js/pages/index.js"></script>
  <script src="/js/pages/ui-elements.js"></script>
  </body>
</html>
